<template>
    <div class="flx-column pd5">
     <div class="flx-column" :style="vstyle" v-if="bookChaperInfo">
         <div class="left-top">
             <image class="left" :src="bookChaperInfo.coverpic || require('../../assets/images/book_cover_def.png')"/>
             <div class="right" >
                  <text class="title">{{bookChaperInfo.title}}</text>
                  <div class="author"><image :src="require('../../assets/images/author_icon.png')" style="width: 40rpx;height:40rpx;margin-right: 15rpx;"></image> <text class="text">{{bookChaperInfo.author}}</text></div>
             </div>
         </div>
         <div class="reading-center" >
     		<text  class="reading-center-left">{{bookChaperInfo.iswz == 1 ?e18n('books.serial'):e18n('books.completed')}} {{e18n('books.num_chapter_in_total',{num:bookChaperInfo.allchapter})}}</text>
     		<text class="reading-center-right"  @click="asc_click">{{asc_t_desc?e18n('info.desc'):e18n('info.asc')}}</text>
         </div>
     </div> 
     <scroll-view :scroll-into-view="sctoId"	 id="id_scroller" v-if="bookChaperInfo"   @scrolltolower="onScbotHandle" @scrolltoupper="onSctopHandle"  :style="'height:'+scroll_height+'px; '" :scroll-y="true" >
     	<div style="flex-direction: column; justify-content: flex-start; align-items: stretch; ">
     		<div v-for="item in chapters"  class="list" @click="chaps_click(item)" :style="vstyle" :id="'item_'+item.id">
     			<div  class="list-title" ><text class="text" :style="(chaps==item.chaps)?';color:#fcad0f':vstyle">{{item.title.trim()}}</text> </div>
     			<div v-if="isfree(item)" class="free">
     					<text class="free-text" :style="vstyle">{{e18n('free')}}</text>
     			</div>
     			<div v-else class="free" :style="vstyle">
     				 <text class="coin-text" :style="vstyle">{{item.coin}}</text>
     				 <image :src="require('../../assets/images/bookbean_icon.png')"  class="bookbean_icon"/>
     			</div>
     		</div>
     		<div :style="'margin-bottom: 50rpx;'+vstyle">
     					<ks-no-more :vstyle="vstyle" :loading="loading" ></ks-no-more>
     		</div>
     	</div>
     </scroll-view>
    </div>
</template>

<script>
  
    export default {
        props: {
            vstyle:String,
            anid: 0,
            chaps: 0,
            vshow:Boolean,
            isvip:Boolean,
        },
        data() {
            return {
                bookChaperInfo: null,
                asc_t_desc: false,
                chapters:[],
                step:20,
                sctop_able:true,
                scbot_able:true,
				scroll_height:300,
				loading:true,
				sctoId:'',
				last:'',
				first:'',
            }
        },
        computed:{
            c_vstyle(){
                return this.vstyle+';color:#fcad0f'
            },
			listChaps(){
				let chaps=[...this.chapters];
				let clast=chaps[chaps.length-1]
				if(clast==this.last || clast==this.first){
					chaps.push({isSpace:true});
				}
				return chaps;
			}
        },
		methods:{
			 ...getApp().globalData.util,
			 show_watcher(v1,v2){
			     if(v1 &&  this.chapters){
			         this.chapters.forEach((item,idx) => {
			             if(item.chaps == this.chaps){
			               //  this.$element('list_ele').scrollTo({index:idx})
			                 return ;
			             }
			         });
			     }
			 },
			 asc_click() {
			         this.asc_t_desc = !this.asc_t_desc
			        // this.$refs.scroll.scrollTop = 0;
			         this.bookChaperInfo.chapters.reverse()
					 this.chapters.reverse()
					
			     },
			 chaps_click(item) {
			     console.log('chaps_click2',item)
			     this.$emit("chaps_click", item)
			 },
			 onScbotHandle(e){
			         if(!this.scbot_able) return ;
			         this.scbot_able=false;
			         setTimeout(()=>{this.scbot_able=true},200);
					 
			         let startItem = this.chapters[this.chapters.length-1];
			         let index = this.bookChaperInfo.chapters.findIndex((item)=>{return item.chaps==(Number(startItem.chaps))})
			         let max = this.bookChaperInfo.chapters.length-1;
						console.log('onScbotHandle 0',startItem,index,max)
					
			         if(index<max  && index>-1){
						 this.insertHandle(index+1,index + this.step,false)
			         }
			 },
			 onSctopHandle(e){
			         if(!this.sctop_able) return ;
			         this.sctop_able=false;
			         setTimeout(()=>{this.sctop_able=true},200);
			         console.log('onSctopHandle 0');
			         let startItem = this.chapters[0];
			         let index = this.bookChaperInfo.chapters.findIndex((item)=>{return item.chaps==(startItem.chaps)})
			         console.log('onSctopHandle 1',startItem,index);
				
			         if(index>0){
						 this.insertHandle(Math.max(index-this.step,0),index,true);
			         }
			 },
			 insertHandle(start,end,head=true){
				  console.log('insertHandle 1',start,end);
				  start=Math.max(start,0);
				  let max=this.bookChaperInfo.chapters.length;
				  end=Math.min(max,end);
				
				  let arr=this.bookChaperInfo.chapters.slice(start,end);
				  console.log('insertHandle 2',start,end,arr);
				  this.chapters=head?[...arr,...this.chapters]:[...this.chapters,...arr];
				   console.log('insertHandle 3',head,this.chapters);
				  this.loading= !(this.chapters[this.chapters.length-1]==this.first || this.chapters[this.chapters.length-1]==this.last)
			 },
			 isfree(item){
				 let free=(this.isvip || Number(item.is_pay) || (item.coin ==0))
			    return free;
			 },
			 updateScorllview(){
			 		  setTimeout(()=>{
			 			  const query = uni.createSelectorQuery().in(this);
			 			  query.select('#id_scroller').boundingClientRect(data => {
			 				this.getWindowInfo((w)=>{
			 							     this.scroll_height=w.windowHeight - data.top;
											 console.log('#id_scroller' , w.windowHeight, data.top, this.scroll_height);
			 				})
			 			  }).exec();
			 		  },100)
			 },
		},
        created() {
			console.log(' menud creaser 0::b ',this.anid,this.chaps);
             this.api().chapterList(this.anid,res => {
                    this.bookChaperInfo = res;
                    let start = Math.max(this.chaps -1,0);
					let end = start + this.step;
					let max=this.bookChaperInfo.chapters.length-1;
					start= end>max?Math.max(max-this.step,0):start;
					end=start + this.step;
					
					this.last=this.bookChaperInfo.chapters[max];
					this.first=this.bookChaperInfo.chapters[0];
					
                    this.insertHandle(start,end);
					console.log(' menud creaser:: ',start,end,this.chapters,this.bookChaperInfo.chapters)
                    this.$emit('load_complete');
                    this.show_watcher(true,true);
					this.updateScorllview();
                })
            this.$watch('vshow',this.show_watcher)
        }
    }
</script>

<style lang="less">
    @import url("./../../assets/styles/style.less");
    .vip {
        background-color: @black;
        padding: 0 5rpx;
        border-radius: 5rpx;
    }
	.root{
		
	}
    .bookbean_icon {
        width: 19rpx;
        height: 20rpx;
        margin: 0 0 0 10rpx;
    }

    .active {
        color: @white;
    }
	
    .active-text {
        color: @them;
    }

    .list {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
		flex-direction: row;
		padding: 25rpx 0px;
		flex:1;
		.list-title {
			flex:7;
			.text{
				color: #303133;
				font-size: 32rpx;
				line-height: 40rpx;
				text-align: left;
				.txt-lines(1);
			}
		}
		.free {
		    flex-direction: row;
		    padding: 5rpx 10rpx;
		    border-radius: 5rpx;
		    display: flex;
		    align-items: flex-end;
		    justify-content: flex-end;
			flex:3;
		
		     .coin-text {
		        font-size: 28rpx;
		        color:  @them;
				font-weight: 800;
		    }
			.free-text{
				color: @them;
				font-size: 28rpx;
			}
		}
    }

    .suo {
        width: 28rpx;
        height: 30rpx;
    }

	.left-top {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
	  
		.left{
			margin-right: 35rpx;
			width:160rpx;
			height:200rpx;
			border-radius: 10rpx;
		}
		.right{
			flex:1;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
			display: flex;
			.title{
				.txt-lines(1);
				font-size: 36rpx;
				font-weight: 800;
				color: @black2;
			}
			.author{
				display: flex;
				flex-direction: row;
				align-items: stretch;
				justify-content: space-between;
				.text{
					.txt-lines(1);
					font-size: 28rpx;
					color: @grey;
				}
			}
		}
	}

	.reading-center {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		line-height: 80rpx;
		height: 80rpx;
		flex:1;
		.reading-center-right {
			color: @grey;
			font-size: 32rpx;
			line-height: 80rpx;
			text-align: right;
			}
		.reading-center-left {
			flex:1;
			line-height: 80rpx;
			text-overflow: ellipsis;
			color: @grey;
			font-size: 32rpx;
			text-align: left;
			
		}
	}
    
</style>